<template>
  <div class="mod-config">
    <el-card class="box-card search-input" shadow="never">
      <el-form label-width="120px"  size="mini" :model="dataForm" @keyup.enter.native="findPage()">
        <el-row>
          <el-col :span="6">
            <el-form-item label="商家名称：">
              <el-input v-model="dataForm.shopName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开播时间：">
              <el-date-picker
                style="width: 100%"
                v-model="times"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="直播状态：">
              <el-select v-model="dataForm.status" style="width: 100%" placeholder="请选择">
                <el-option label="全部"></el-option>
                <el-option label="待直播" value="15"></el-option>
                <el-option label="直播中" value="16"></el-option>
                <el-option label="违规下线" value="17"></el-option>
                <el-option label="已结束" value="18"></el-option>
                <el-option label="编辑中" value="19"></el-option>
                <el-option label="超时作废" value="27"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="直播间标题：">
              <el-input v-model="dataForm.title" ></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="直播间编号：">
              <el-input v-model="dataForm.number" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-form-item>
              <el-button type="primary" @click="query()">查询</el-button>
              <el-button @click="reset('dataForm')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-table
      :data="pageResult"
      :highlight-current-row="true"
      v-loading="loading"
      element-loading-text="拼命加载中"
      show-overflow-tooltip="true"
      max-height="600"
      size="mini"
      align="left"
      style="width:100%;"
      :header-cell-style="{ 'color': '#909399'}"
    >
      <el-table-column label="ID" min-width="80" align="center" prop="id"></el-table-column>
      <el-table-column label="直播封面" min-width="120" align="center" prop="homeCover">
        <template slot-scope="scope">
          <img :src="scope.row.homeCover" style="width: 100px;height: 100px"></img>
        </template>
      </el-table-column>
      <el-table-column label="直播间编号" min-width="100" align="center" prop="number"></el-table-column>
      <el-table-column label="直播间名称" min-width="100" align="center" prop="title"></el-table-column>
      <el-table-column label="商家名称" min-width="100" align="center" prop="shopName"></el-table-column>
      <el-table-column label="开播时间" min-width="180" align="center" prop="startTime"></el-table-column>
      <el-table-column label="商品数量" min-width="100" align="center" prop="goodsNum"></el-table-column>
      <el-table-column label="观看人数" min-width="100" align="center" prop="watchNum"></el-table-column>
      <el-table-column label="点赞人数" min-width="100" align="center" prop="likeNum"></el-table-column>
      <el-table-column label="排序顺序" min-width="100" align="center" prop="sort">
        <template slot-scope="scope">
          <el-select v-model="scope.row.sort" placeholder="请选择" @change="updateSort(scope.$index,scope.row)"
                     v-if="scope.row.status == 15 || scope.row.status == 16 || scope.row.status == 17">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="直播状态" min-width="80" align="center" prop="status" :formatter="statusFormat"></el-table-column>
      <el-table-column label="操作" min-width="185" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
          <el-button
            size="mini"
            type="primary"
            v-if="scope.row.status == 16"
            @click="handleOffShelf(scope.row)">下架</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.status != 16"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[5,10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <el-dialog title="下架原因" :visible.sync="offFormVisible" width="30%">
      <el-form :model="offForm" :rules="offFormRules">
        <el-form-item>
          <el-radio v-model="offForm.type" label="1">违规下架</el-radio>
          <el-radio v-model="offForm.type" label="2">其他</el-radio>
        </el-form-item>
        <el-form-item required>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请说明原因"
            v-model="offForm.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="offFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmOff()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      width="94%"
      title="直播详情"
      :close-on-click-modal="false"
      :visible.sync="dialogDetailVisible"
      @close="editCancel">
      <el-container>
        <el-header height="auto" width="100%">
          <el-container>
            <el-main width="50%" height="auto">
              <div style="float: left">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1931444541,2925964066&fm=26&gp=0.jpg" style="width: 100px;height: 100px;"/>
              </div>
              <div style="float: left;padding-left: 10px;">
                <span>直播名称：<span style="font-size: 16px;font-weight: 600">{{title}}</span></span><br/>
                <span>直播商家：<span style="font-size: 16px;font-weight: 600">{{shopName}}</span></span><br/>
                <span>主播：<span style="font-size: 16px;font-weight: 600">{{anchorName}}</span></span><br/>
                <span>开播时间：<span style="font-size: 16px;font-weight: 600">{{startTime}}</span></span><br/>
                <span>结束时间：<span style="font-size: 16px;font-weight: 600">{{actualEndTime}} （共{{duration}}分钟）</span></span>
              </div>
            </el-main>
            <el-main width="50%" style="text-align: center" height="auto">
              <div style="width: 30%;float: left">
                <div>观看次数</div><br/>
                <div style="font-size: 20px;font-weight: 600">{{lookNum}}</div>
              </div>
              <div style="width: 30%;float: left">
                <div>最高在线人数</div><br/>
                <div style="font-size: 20px;font-weight: 600">{{maxOnUserNum}}</div>
              </div>
              <div style="width: 30%;float: left">
                <div>新增粉丝数</div><br/>
                <div style="font-size: 20px;font-weight: 600">{{createFansNum}}</div>
              </div>
            </el-main>
          </el-container>
        </el-header>
        <el-main>
          <div style="width: 100%">
            <h3>数据效果概览</h3>
            <!--                    <div style="padding-left: 16px;width: 21%;height:80px;float: left;margin-left: 15px;margin-top: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">-->
            <!--                        <div>观看次数</div><br/>-->
            <!--                        <div style="font-size: 20px;font-weight: 600">{{lookNum}}</div>-->
            <!--                    </div>-->
            <div style="padding-left: 16px;width: 21%;height:80px;float: left;margin-left: 15px;margin-top: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div>直播间浏览次数</div><br/>
              <div style="font-size: 20px;font-weight: 600">{{lookNum}}</div>
            </div>
            <!--<div style="padding-left: 16px;width: 21%;height:80px;float: left;margin-left: 15px;margin-top: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                <div>平均观看时长(分钟)</div><br/>
                <div style="font-size: 20px;font-weight: 600">{{avgLookDuration}}</div>
                    </div>-->
            <div style="padding-left: 16px;width: 21%;height:80px;float: left;margin-left: 15px;margin-top: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div>封面点击率（%）</div><br/>
              <div style="font-size: 20px;font-weight: 600">{{clickRate}}</div>
            </div>
            <div style="padding-left: 16px;width: 21%;height:80px;float: left;margin-left: 15px;margin-top: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div>分享次数</div><br/>
              <div style="font-size: 20px;font-weight: 600">{{shareNum}}</div>
            </div>
            <div style="padding-left: 16px;width: 21%;height:80px;float: left;margin-left: 15px;margin-top: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div>分享人数</div><br/>
              <div style="font-size: 20px;font-weight: 600">{{shareUserNum}}</div>
            </div>
            <div style="padding-left: 16px;width: 21%;height:80px;float: left;margin-left: 15px;margin-top: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div>新增粉丝数</div><br/>
              <div style="font-size: 20px;font-weight: 600">{{createFansNum}}</div>
            </div>
          </div>
        </el-main>
        <el-main  height="auto">
          <!--         <img src="../../static/img/live.png" style="width: 100%;"/>-->
          <!--<div id="main" style="width: 600px;height:400px;"></div>-->
        </el-main>
        <h3>商品分析</h3>
        <el-footer height="auto">
          <el-table :data="overviewData" style="width: 100%;" height="500" :header-cell-style="headerCellStyle">
            <el-table-column prop="id" align="center" label="序号" width="150">
            </el-table-column>
            <el-table-column prop="productPhoto" align="center" label="商品图片" width="250">
              <template slot-scope="scope">
                <img :src="scope.row.productPhoto" width="16" height="16"/>
              </template>
            </el-table-column>
            <el-table-column prop="productName" align="center" label="商品名称" width="250">
            </el-table-column>
            <el-table-column prop="price" align="center" label="商品价格" width="250">
            </el-table-column>
            <el-table-column prop="inventory" align="center" label="商品库存" width="250">
            </el-table-column>
            <el-table-column prop="productHref" align="center" label="商品链接" min-width="200">
            </el-table-column>
            <el-table-column prop="clickNum" align="center" label="点击次数" min-width="200">
            </el-table-column>
            <el-table-column prop="orderNum" align="center" label="下单数量" min-width="200">
            </el-table-column>
          </el-table>
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              @size-change="sizeChangeHandleInfo"
              @current-change="currentChangeHandleInfo"
              :current-page="InfopageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="InfopageSize"
              :total="InfototalPage"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>
<script>
  import CyTable from "./component/CyTable";
  export default {
    components: {
      CyTable,
    },
    data() {
      return {
        dataForm:{
          shopName:null,
          startTimeStart:null,
          startTimeEnd:null,
          title:null
        },//查询条件
        headerCellStyle:{
          'background-color': '#f1f1f1'
        },
        times:null,
        filterColumns: [],
        columns:[],
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: [],
        totalSize:null,//列表总条数
        loading:false,//表格加载
        offFormVisible:false,//下架弹框确认
        dialogDetailVisible:false,
        anchorName:'',
        shopName:'',
        title:'',
        startTime:'',
        actualEndTime:'',
        duration:0,
        createFansNum:'',
        shareUserNum:'',
        overviewData:[],
        shareNum:'',
        maxOnUserNum:0,
        clickRate:0,
        avgLookDuration:0,
        InfopageIndex: 1,
        InfopageSize: 10,
        InfototalPage: 0,
        lookNum:0,
        liveId:0,
        offForm:{
          remark:null,
          type:'1',
          id:null
        },//下架表单
        offFormRules:{
          remark:[
            { required: true, message: "请输入下架原因", trigger: "blur" },
            { required: true, message: "请输入下架原因", trigger: "change" },
          ],
        },//下架表单校验
        options:[
          {value: '1', label: '1'},
          {value: '2', label: '2'},
          {value: '3', label: '3'},
          {value: '4', label: '4'},
          {value: '5', label: '5'},
          {value: '6', label: '6'},
          {value: '7', label: '7'},
          {value: '8', label: '8'},
          {value: '9', label: '9'},
          {value: '10', label: '10'},
        ],//排序初始值
      }
    },
    mounted: function () {
      this.findPage();
      this.columns = [
        { prop: "title", label: "商品图片", minWidth: 120 },
        { prop: "title", label: "商品名称", minWidth: 120 },
        { prop: "title", label: "商品价格", minWidth: 120,render:false},
        { prop: "title", label: "商品库存", minWidth: 120,render:false},
        { prop: "status", label: "商品链接", minWidth: 120},
        { prop: "status", label: "点击次数", minWidth: 120},
        { prop: "status", label: "下单次数", minWidth: 120},
      ];
      let temp = [];
      this.columns.forEach(function(key, val) {
        temp.push(key);
      });
      this.filterColumns = temp;
    },
    methods: {
// 状态格式化
      statusFormat: function(row, column, cellValue, index) {
        if (Number(cellValue) == 15) {
          return "待直播";
        }else if (Number(cellValue) == 16){
          return "直播中";
        }else if (Number(cellValue) == 17){
          return "已结束";
        }else if (Number(cellValue) == 18){
          return "违规下线";
        }else if (Number(cellValue) == 19){
          return "编辑中";
        }
        return "超时作废";
      },
      // 获取分页数据
      findPage: function() {
        if (this.dataForm == undefined || this.dataForm == null) {
          this.dataForm = {};
        }
        if (this.times && this.times.length > 0){
          this.dataForm.startTimeStart = this.times[0] + "";
          this.dataForm.startTimeEnd = this.times[1] + "";
        }
        this.dataForm.pageNum = this.pageRequest.pageNum;
        this.dataForm.pageSize = this.pageRequest.pageSize;

        this.loading = true;
        this.utils.request.liveRequest({
          url: '/api/v1/livePlaza/list',
          method: 'get',
          params: this.dataForm
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0' && data.data && data.data.rows) {
            this.pageResult = data.data.rows;
            //赋值原排序值
            this.pageResult.forEach((item,$index,arr) =>{
              item.currentSort = item.sort;
            });
            this.totalSize = Number(data.data.total);
          } else {
            this.pageResult = []
            this.totalSize = 0
          }
          this.loading = false;
        })
      },
      // 换页刷新
      refreshPageRequest: function(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      // 换页刷新
      handleSizeChange: function(pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.findPage();
      },
      //删除
      handleDelete(row){
        this.$confirm("你确定要删除此项吗？", "提示", {
          type: "warning"
        }).then(() => {
          let params={id:row.id};
          this.utils.request.liveRequest({
            url: '/api/v1/livePlaza/delete',
            method: 'delete',
            params: params
          }).
          then(res =>{
            if (res.data && res.data.code == '0') {
              this.findPage();
              this.$message({message: "删除成功", type: "success"});
            } else {
              this.$message({message: "删除失败", type: "error"});
            }
          })
        })
      },
      //下架
      handleOffShelf(row){
        this.$confirm("确认下架该直播间吗？", "提示", {
          type: "warning"
        }).then(() => {
          this.offFormVisible = true;
          this.offForm = {type:'1',remark:null,id:row.id};
        })
      },
      //查看详情
      handleDetail(params,row){
        this.dialogDetailVisible=true;
        this.liveId=row.id
        this.getDataInfo(row)
        this.getDataList(row.id)
        /*var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);*/
      },
      getDataInfo(row) {

        let params={};
        params.id=row.id;
        params.number=row.number
        this.utils.request.liveRequest({
          url: '/api/v1/liveInfo/liveDetail',
          method:'get',
          params: params
        }).
        then(result => {
          let data = result.data;
          if (data && data.code == "0") {
            this.title=data.data.title;
            this.anchorName=data.data.anchorName;
            this.shopName=data.data.shopName;
            this.startTime=data.data.startTime;
            this.actualEndTime=data.data.actualEndTime;
            this.duration=data.data.duration;
            console.log(this.duration)
            this.createFansNum=data.data.createFansNum;
            this.shareUserNum=data.data.shareUserNum;
            this.shareNum=data.data.shareNum;
            this.lookNum=data.data.lookNum;
            this.maxOnUserNum=data.data.maxOnUserNum;
            if(data.data.lookNum===0){
              this.clickRate=0
            }else if(data.data.maxOnUserNum===0){
              this.clickRate=0;
            }else {
              this.clickRate = Math.floor((data.data.lookNum / data.data.maxOnUserNum) * 100) / 100
            }
            if(data.data.maxOnUserNum===0 || data.data.duration===0){
              this.avgLookDuration=0
            }else {
              this.avgLookDuration=parseFloat((data.data.duration/data.data.maxOnUserNum).toFixed(2));
            }
            console.log(this.avgLookDuration)
          }
        })
      },
      getDataList(id){
        let params={};
        params.pageNum=this.InfopageIndex;
        params.pageSize=this.InfopageSize;
        params.liveId=this.liveId;
        this.utils.request.liveRequest({
          url: '/api/v1/liveProductInfo/list',
          method:'get',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code == "0") {
            console.log(data.data)
            this.overviewData=data.data.rows;
            this.InfototalPage = data.data.total
          }
        })
      },
      sizeChangeHandleInfo(val) {
        this.InfopageSize = val
        this.InfopageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandleInfo(val) {
        this.InfopageIndex = val
        this.getDataList()
      },
      //关闭详情
      editCancel(){},
      //修改排序值
      updateSort(index,row){
        //获取原数据排序值 当前排序和要更新排序值相同时不做更新操作
        if(row.sort==row.currentSort){
          return
        }
        let params = {id:row.id,sort:row.sort,currentSort:row.currentSort};
        this.utils.request.liveRequest({
          url: '/api/v1/livePlaza/updateSort',
          method: 'put',
          params: params
        }).
        then(res =>{
          if (res.data && res.data.code == '0') {
            //重新渲染列表
            this.findPage();
            this.$message({message: "排序成功", type: "success"});
          } else {
            this.$message({message: "排序失败", type: "error"});
          }
        })
      },
      query(){
        this.pageRequest.pageNum=1;
        this.findPage();
      },
      //重置按钮
      reset(){
        this.dataForm = {};
        this.times = null;
        this.findPage();
      },
      //下架
      confirmOff(){
        if (!this.offForm.type){
          this.$message({message: "请选择下架类型!", type: "error"});
          return;
        }
        if (!this.offForm.remark){
          this.$message({message: "请输入下架原因!", type: "error"});
          return;
        }
        this.utils.request.liveRequest({
          url: '/api/v1/livePlaza/offShelf',
          method: 'put',
          params: this.offForm
        }).then(res =>{
          if (res.data && res.data.code == '0') {
            //隐藏下架确认框
            this.offFormVisible = false;
            //重新渲染列表
            this.findPage();
            this.$message({message: "下架成功", type: "success"});
          } else {
            this.$message({message: "下架失败", type: "error"});
          }
        })
      },
    }
  }
</script>
<style lang="scss">
  #app{
    text-align: left;
  }
</style>
